<!-- 表单 》 自定义插槽 -->

<template>
  <el-form-item v-bind="formItem">
    <!-- 隐藏输入框，触发校验 -->
    <el-input v-show="false" :value="jsonStr" />

    <!-- 标签 -->
    <template v-if="hasLabelSlot" #label>
      <slot name="label" :label="formItem.label">{{ formItem.label }}</slot>
    </template>

    <div :class="slotClass">
      <slot :text="showText">{{ showText }}</slot>
    </div>
  </el-form-item>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import mixForm from '../mixForm'

const name = 'FormSlot'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name,

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [mixForm],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: CORE.WEB[name],

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      model: '', // 内部绑定值
      EMPTY: '', // 空值常量
    }
  },

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 展示文本
     */
    showText() {
      const { obj, prop, init } = this
      return obj[prop] || init
    },

    /**
     * 插槽样式类
     */
    slotClass() {
      const { className, isDisabled, isTip } = this
      const disableStr = isDisabled ? ` ${className}-disabled` : ''
      const tipStr = isTip ? ` ${className}-tip` : ''
      return `${className}${disableStr}${tipStr}`
    },

    /**
     * JSON 串
     */
    jsonStr() {
      return CORE.isEmpty(this.model) ? '' : JSON.stringify(this.model)
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 是否相等 (可覆盖)
     */
    equals() {
      return true
    },
  },
}
</script>
